Skip to main content

버튼 태그

  • 사용자가 클릭할 수 있는 요소
  • form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치가 가능

button 타입​

  • button: 기본 행동이 없다. 클릭했을 때 아무것도 하지 않음. 보통 JavaScript와 연결해서 사용
    • 양식 제출용이 아니라면 type="button"으로 지정
    • submit: 서버로 양식 데이터 제출
    • reset : <input type="reset"> 과 동일하게 초깃값으로 돌립니다.
    • disabled: 누르거나 클릭할 수 없음.
<input type="button" value="버튼" />
<button type="button">버튼</button>
<!-- input의 경우 빈태그 요소이기에 value 특성 텍스트 값 밖에 지정할 수 없다.
button의 경우 태그 사이에 여러 컨텐츠 삽입, ::before, ::after와 같은 가상 요소를 사용 가능 -->
caution

<a>와 <button>의 다른점

  1. 태그 위를 올려보면 사이트에 대한 정보가 나온다
  2. 버튼의 우클릭을 해보면 나오는 포멧형태가 다르다.
  3. a태그 같은 경우 새창으로 화면이 가능하나, 버튼은 새창으로 불러오지 못함.
  4. <a>태그는 페이지간의 이동 용도로 사용이 적합
  5. <button>로그인과 같은 데이터 전송이 필요한 경우나 다른 홈페이지를 연결할 때 사용하는 것이 적합
tip

접근성 측면에서 버튼의 크기는 최소 44 * 44 px을 권장 사용자에게 편리성을 제공